<template>
  <view class="page-container">
    <!-- 设置选项列表 -->
    <view class="settings-list">
      <!-- 账号与安全 -->
      <view class="setting-item" @tap="navigateTo('/pages/account_safe/account_safe')">
        <view class="item-left">
          <image class="item-icon" src="/static/icons/anquan.png" mode="aspectFit"></image>
          <text class="item-text">账号与安全</text>
        </view>
        <text class="arrow">></text>
      </view>
      <!-- 帮助与反馈 -->
      <view class="setting-item" @tap="navigateTo('/pages/bangzhu/bangzhu')">
        <view class="item-left">
          <image class="item-icon" src="/static/icons/bangzhu.png" mode="aspectFit"></image>
          <text class="item-text">帮助与反馈</text>
        </view>
        <text class="arrow">></text>
      </view>
      <!-- 关于小舟报 -->
      <view class="setting-item" @tap="navigateTo('/pages/guanyu/guanyu')">
        <view class="item-left">
          <image class="item-icon" src="/static/icons/guanyu.png" mode="aspectFit"></image>
          <text class="item-text">关于小舟报</text>
        </view>
        <text class="arrow">></text>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-btn" @tap="handleLogout">
      退出登录
    </view>

    <!-- 底部协议链接 -->
    <view class="agreement-links">
      <text class="link" @tap="goToAgreement('privacy')">《个人信息保护指南》</text>
      <text class="link" @tap="goToAgreement('service')">《第三方信息共享清单》</text>
    </view>
  </view>
</template>

<script>
import { userApi } from '../../api/user'

export default {
  data() {
    return {
      statusBarHeight: 20
    }
  },
  onLoad() {
    this.getStatusBarHeight()
  },
  methods: {
    getStatusBarHeight() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight
    },
    goBack() {
      uni.navigateBack()
    },
    navigateTo(url) {
      uni.navigateTo({ url })
    },
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 执行退出登录
            this.logout()
          }
        }
      })
    },
    async logout() {
      try {
        uni.showLoading({
          title: '退出中...'
        })

        // 调用退出登录接口
        const res = await userApi.logout()
        
        uni.hideLoading()
        
        if (res.code === 200) {
          // 清除本地存储
          uni.clearStorageSync()
          
          // 跳转到登录页
          uni.reLaunch({
            url: '/pages/login2/login2'
          })
        } else {
          uni.showToast({
            title: res.message || '退出失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('退出失败：', error)
        uni.hideLoading()
        uni.showToast({
          title: '退出失败',
          icon: 'none'
        })
      }
    },
    goToAgreement(type) {
      uni.navigateTo({
        url: `/pages/agreement/index?type=${type}`
      })
    }
  }
}
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  font-weight: bold;
}

.left {
  padding: 20rpx;
}

.back-icon {
  font-size: 40rpx;
}

.title {
  font-size: 34rpx;
  font-weight: 500;
}

.right {
  display: flex;
  align-items: center;
}

.share-icon,
.more-icon {
  width: 44rpx;
  height: 44rpx;
  margin-left: 30rpx;
}

.settings-list {

  background-color: #fff;
  width: 340px;
  margin: 0 auto;
  border-radius: 44rpx;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.item-left {
  display: flex;
  align-items: center;
}

.item-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.item-text {
  font-size: 28rpx;
  color: #333;
}

.arrow {
  font-size: 24rpx;
  color: #999;
}

.logout-btn {
  margin: 40rpx 30rpx;
  height: 88rpx;
  background-color: #fff;
  color: black;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}

.logout-btn:active {
  opacity: 0.8;
}

.agreement-links {
  font-size: 24rpx;
  color: mediumpurple;
  text-align: center;
  
}

.link {
  margin: 0 10rpx;
}
</style>